<template>
    <router-link :to="{ name: 'supplierDetails', params: { id: item.id } }" class="item flex align-items">
        <div class="item-content">
            <h3 class="text-hide">{{ item.title }}</h3>
            <div class="desc text-hide-2">{{ item.intro }}</div>
            <div class="attachment" v-if="item.file">附件：<span>{{ item.file }}</span></div>
            <div class="footer flex">
                <span class="mr-30" v-if="item.goods">
                    所属供应商：
                    <el-tag size="mini" v-for="(rs, index) in item.goods" :key="index">
                        {{ rs.title }}
                    </el-tag>
                </span>
                <time>时间：{{ item.create_time }}</time>
            </div>
        </div>
    </router-link>
</template>

<script>
export default {
    name: "sceneplanItem",
    components: {
    },
    props: {
        item: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {

        }
    },
    created () { },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.item {
    position: relative;
    padding: 30px;
    cursor: pointer;
    background: #FFF;
    transition: all 0.3s ease;
    text-decoration: none;

    &::after {
        content: '';
        height: 1px;
        background: rgba(46, 48, 51, .1);
        position: absolute;
        bottom: 0;
        left: 30px;
        right: 30px;
    }

    &:hover {
        z-index: 1;
        box-shadow: 0px 3px 6px 1px #EEE8E8;
        border-radius: 10px 10px 10px 10px;

        &::after {
            display: none;
        }

        h3 {
            color: #f15953;
        }

        img {
            transform: scale(1.04);
        }
    }

    .item-img {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
        border-radius: 10px;
        overflow: hidden;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all .5s ease .1s;
        }
    }

    h3 {
        color: #2E3033;
        font-size: 18px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }

    .desc {
        color: rgba(46, 48, 51, .6);
        font-size: 16px;
    }

    .attachment {
        color: #2E3033;
        margin-top: 15px;

        span {
            color: #f15953;
        }
    }

    .footer {
        margin-top: 15px;
        color: rgba(46, 48, 51, .6);
        font-size: 16px;

        time {
            display: block;



        }
    }

}
.el-tag {
    &+.el-tag {
        margin-left: 10px;
    }
}
</style>